<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- margin-left:50px; -->
      <el-form
        label-position="left"
        label-width="100px"
        style="width: 100%; margin-left: 20px"
      >
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          查询
        </el-button>
        <el-row type="flex" justify="start" style="margin:15px 0  15px 0">
          <el-col :span="6">
            <el-form-item label="开始日期:">
              <el-date-picker
                v-model="listQuery.FStartDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="开始日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截止日期:">
              <el-date-picker
                v-model="listQuery.FEndDate"
                type="datetime"
                format="yyyy-MM-dd"
                placeholder="截止日期"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column>
        <el-table-column>
          <el-table-column label="物料代码" width="150px" align="center" fixed>
            <template slot-scope="{ row }">
              <span>{{ row.物料代码 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column label="期间收发总汇" align="center">
        <el-table-column
          v-for="(col, index) in cols"
          :label="col.label"
          :key="index"
          :prop="col.prop"
          align="center"
        >
          <el-table-column
            v-for="(props, propsindex) in col.propsChildren"
            :label="props.label.title"
            :key="propsindex"
            :prop="props.prop"
            width="120px"
            align="center"
          >
            <template>
              <span>{{ props.label.data }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="周转率" align="center">
        <el-table-column>
          <el-table-column
            v-for="(col, index) in cols1"
            :label="col.label.title"
            :key="index"
            :prop="col.prop"
            width="120px"
            align="center"
          >
            <template>
              <span>{{ col.label.data }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
      style="text-align: center"
    />
  </div>
</template>

<script>
import { fetchList, fetchPv } from "@/api/ApiService";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      value1: "",
      cols: [
        {
          prop: "time1",
          label: "2020.5",
          propsChildren: [
            { prop: "aQty", label: { title: "期初结存金额", data: 1 } },
            { prop: "aQty", label: { title: "本期发出金额", data: "" } },
            { prop: "aQty", label: { title: "期末结存金额", data: 9 } }
          ]
        },
        {
          prop: "time2",
          label: "2020.6",
          propsChildren: [
            { prop: "aQty", label: { title: "期初结存金额", data: 1 } },
            { prop: "aQty", label: { title: "本期发出金额", data: "" } },
            { prop: "aQty", label: { title: "期末结存金额", data: 9 } }
          ]
        },
        {
          prop: "time3",
          label: "2020.7",
          propsChildren: [
            { prop: "aQty", label: { title: "期初结存金额", data: 1 } },
            { prop: "aQty", label: { title: "本期发出金额", data: "" } },
            { prop: "aQty", label: { title: "期末结存金额", data: 9 } }
          ]
        },
        {
          prop: "time4",
          label: "2020.8",
          propsChildren: [
            { prop: "aQty", label: { title: "期初结存金额", data: 1 } },
            { prop: "aQty", label: { title: "本期发出金额", data: "" } },
            { prop: "aQty", label: { title: "期末结存金额", data: 9 } }
          ]
        },
        {
          prop: "time5",
          label: "2020.9",
          propsChildren: [
            { prop: "aQty", label: { title: "期初结存金额", data: 1 } },
            { prop: "aQty", label: { title: "本期发出金额", data: "" } },
            { prop: "aQty", label: { title: "期末结存金额", data: 9 } }
          ]
        }
      ],

      cols1: [
        {
          prop: "time1",
          label: { title: "2020.5", data: "0.0%" }
        },
        {
          prop: "time2",
          label: { title: "2020.5~2020.6", data: "0.0%" }
        },
        {
          prop: "time3",
          label: { title: "2020.5~2020.7", data: "0.0%" }
        },
        {
          prop: "time4",
          label: { title: "2020.5~2020.8", data: "0.0%" }
        },
        {
          prop: "time5",
          label: { title: "2020.5~2020.9", data: "0.0%" }
        }
      ],

      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id"
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create"
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" }
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change"
          }
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" }
        ]
      },
      downloadLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.listQuery.ActionCode = "SearchStockPrepareInTimeReport";
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success"
      });
      row.status = status;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        status: "published",
        type: ""
      };
    },

    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData;
        this.dialogPvVisible = true;
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["物料代码", "期间收发总汇", "周转率"];
        const filterVal = ["物料代码", "期间收发总汇", "周转率"];
        const data = this.formatJson(filterVal);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list"
        });
        this.downloadLoading = false;
      });
    },
    handleDownloadAll() {
      this.listLoading = true;
      var query = JSON.parse(JSON.stringify(this.listQuery));
      delete query.page;
      delete query.limit;

      fetchList(query).then(response => {
        var listAll = response.data.items;
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = ["物料代码", "期间收发总汇", "周转率"];
          const filterVal = ["物料代码", "期间收发总汇", "周转率"];
          const data = this.formatJson2(filterVal, listAll);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "table-list"
          });
          this.listLoading = false;
        });
      });
    },
    formatJson(filterVal) {
      return this.list.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    formatJson2(filterVal, items) {
      return items.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    }
  }
};
</script>
<style>
.pagination-container {
  margin-top: 0px;
}
.pagination-container[data-v-72233bcd] {
  background: #fff;
  padding: 10px 16px;
}
.el-form-item {
  margin-bottom: 5px;
}
.filter-container .filter-item {
  margin-bottom: 0px;
}
</style>
